<template>

    <section>
        <!--产品详情查看-->
        <div>
            <el-col align="right">
                <el-button @click="cancel">返回</el-button>
            </el-col>
            <el-col :span="24" class="toolbar">基本信息</el-col>
            <el-col v-if="customerType == 1" :span="24"  style="padding-bottom: 0px; ">

                <el-row :gutter="20">
                    <el-col :span="4"><div class="grid-content txt-right">客户信息：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right"></div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">客户姓名：</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-left">{{ customerData.full_name }}</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right">性别：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left">{{ formatGender(customerData.gender) }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">证件类型：</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-left">{{ formatIdentityType(customerData.identity_type) }}</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right">证件号码：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left">{{ customerData.identity_no }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">联系电话：</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-left">{{ customerData.mobile }}</div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right">联系地址：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left">{{ customerData.address }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4"><div class="grid-content txt-right">销售信息：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right"></div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">销售姓名：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.sale_department_name + "/" + customerData.sale_team_name + "/" + customerData.sale_name }}</div></el-col>
                </el-row>


            </el-col>

            <el-col v-if="customerType == 2" :span="24"  style="padding-bottom: 0px; ">

                <el-row :gutter="20">
                    <el-col :span="4"><div class="grid-content txt-right">客户信息：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right"></div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">企业名称：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.company_name }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">营业执照号码/统一社会信用代码：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.credit_no }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">组织机构代码证号码：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.identity_no }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">法定代表人或负责人：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.full_name }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">联系电话：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.telephone }}</div></el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4"><div class="grid-content txt-right">销售信息：</div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                    <el-col :span="4"><div class="grid-content txt-right"></div></el-col>
                    <el-col :span="8"><div class="grid-content txt-left"></div></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content txt-right">销售姓名：</div></el-col>
                    <el-col :span="16"><div class="grid-content txt-left">{{ customerData.sale_department_name + "/" + customerData.sale_team_name + "/" + customerData.sale_name }}</div></el-col>
                </el-row>


            </el-col>

            <el-col :span="24"  class="toolbar">资金信息</el-col>
            <!--搜索结果表格-->
            <el-table
                    :header-row-style="headerRowStyle"
                    :data="customerData.contract_list"
                    stripe
                    style="width: 100%;">
                <el-table-column
                        label="合同编号"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                @click="contractInfo(scope.row.id)"
                                type="text"
                                size="small">
                            {{ scope.row.no }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="产品名称"
                        prop="product_name">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="合同生效日"
                        prop="term_start">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="合同金额"
                        :formatter="formatterAmount">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="销售姓名"
                        prop="sale_name">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="状态"
                        :formatter="formatContractState">
                </el-table-column>
            </el-table>

        </div>
    </section>
</template>

<script>
    import * as api from "../../api/customer_api";
    import dict from "../../common/js/dict"

    export default {
        data() {
            return {
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                customerType: "",
                customerData: {
                    contract_list: []
                },
                options: {
                    contract_state: dict.contract_state,
                    identity_type: dict.identity_type,
                    contract_customer_type: dict.contract_customer_type,
                    gender: dict.gender
                }
            }
        },
        methods: {
            formatterAmount(row) {
                if(row.amount)
                {
                    return (row.amount / 100);
                }
                return '';
            },
            cancel() {
                this.$router.push('../list');
            },
            contractInfo(id) {
                this.$router.push('../../contract/detail/' + id);
            },
            formatContractState(row) {
                return this.options.contract_state[row.state];
            },
            formatIdentityType(val) {
                return this.options.identity_type[val];
            },
            formatCustomerType(val) {
                return this.options.contract_customer_type[val];
            },
            formatGender(val) {
                return this.options.gender[val];
            },
            loadCustomer() {
                let params = {
                    id: this.$route.params.id
                };

                api.customerInfo(params).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {

                        this.customerType = result.type;

                        this.customerData = result;

                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });

            },
        },
        mounted() {
            this.$nextTick(function () {
                this.loadCustomer(); //初始化页面数据
            });
        }

    }
</script>

<style scoped>
    .txt-left
    {
        text-align: left;
        margin-bottom: 15px;
    }
    .txt-right
    {
        text-align: right;
        margin-bottom: 15px;
    }
</style>